import React, { useEffect, useState } from 'react'
import { XoProTable } from '@/components/XoProTable';
import styles from './nickName.less';
import type { ProColumns } from '@ant-design/pro-table';
import type { CourseData } from '@/models/coursedata';
import { courseStepList, groupOptionList, userCourseAnimationList } from '@/services/situation';
import { ProFormSelect } from '@ant-design/pro-form';
import { onRequestNickName } from '@/utils/requestPhone';
import { history } from 'umi';
import type { Situation } from '@/models/situation';
export default function Cartoon(props: any) {
  const courseId = history.location.query?.id;
  const activityId=history.location.query?.activityId;
  const { stepIdNew } = props;
  const [newName, setNewName] = useState<string>();
  const [selectData, setData] = useState<any>([]);
  useEffect(() => {
    (async () => {
      const res = (await courseStepList({ itemId: Number(courseId) }))?.result;
      res.forEach((item: Situation) => {
        if (item.type == 3) {
          setNewName(item.sourceName);
        }
      });
    })();
    (async () => {
      const res = await groupOptionList({ activityId: activityId })
      const res1 = res.result?.map((item: any) => {
        return { label: item.name, value: item.id }
      })
      setData(res1)
    })();




    }, []);
    console.log(newName);
    
    
    const columns: ProColumns<CourseData>[] = [
      {
        dataIndex: 'uid',
        title: '用户ID',
        search: false
      },
      {
        dataIndex: 'nickname',
        title: '用户昵称',
        search: false,
      },
      {
        dataIndex: 'uid',
        title: '昵称/手机号',
        width: 150,
        hideInTable: true,
        renderFormItem: () => {
          return (
            <ProFormSelect
              wrapperCol={{ span: 24 }}
              showSearch
              debounceTime={500}
              name="uid"
              request={onRequestNickName}
            />
          )
        }
      },
      {
        dataIndex: 'realName',
        title: '真实姓名',
        search: false
      },
      {
        dataIndex: 'phone',
        title: '手机号',
        search: false,
      },
      {
        dataIndex: 'groupName',
        title: '班级',
        renderFormItem: () => {
          return (
            <ProFormSelect
              name="groupId"
              placeholder="请选择"
              debounceTime={500}
              colon={false}
              options={selectData}
            />
          )
        }
      },
      {
        dataIndex: 'teacherName',
        title: '辅导老师',
        search: false
      },
      {
        dataIndex: 'historyStar',
        title: newName?newName:'-',
        search: false,
        
      }
    ]

    return (
      <XoProTable
        className={styles.playlist}
        request={async (params) => {
          const body = (await userCourseAnimationList({ ...params, stepId: Number(stepIdNew) }))?.result;
          return {
            data: body?.records,
            total: body?.total,
          };
        }}
        options={false}
        rowKey="key"
        scroll={{ x: 1080 }}
        columns={columns}
        hasIndex={false}
      />
    )
  }
